<template>
	<view class="content">
		<u-navbar :fixed="false" title="选择工艺路线" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
		</u-navbar>

		<view class="MainBox">
			<!-- 非空数据 -->
			<view class="HasDataBox" v-if="PageList.length">
				<!-- 排序列表 -->
				<!-- <view> -->
				<m-basic-drag class="ListBox" v-model="PageList" itemKey="index" :column="1" itemHeight="100px"
					height="100%">
					<template #item="{element,index}">

						<view class="MaxBox x-f">
							<view class="TheIndex x-f">
								<view class="IndexBox">
									<text>{{index +1}}</text>
								</view>
							</view>

							<view class="x-f" style="flex: 1;height: 100%;padding: 10px 16px 10px 6px;">

								<view class="x-bc"
									style="background-color: #fff;height: 100%;width: 100%;padding: 6px 10px;border-radius: 12px;">
									<view class="LeftBox x-f">
										<u-icon name="minus-circle-fill" color="#f56c6c" size="24"
											@click="DeleteListData(element,index)"></u-icon>

										<view v-if="element.Type"
											style="height: 100%;background-color: #c6e0fc;padding: 4px 2px;border-radius: 4px;margin-left: 4px;">
											<!-- <uni-icons class="Icon" color="#209cde" custom-prefix="iconfont"
												type="icon-gongyiluxian" size="18"></uni-icons> -->

											<uni-icons class="Icon" color="#209cde" fontFamily="CustomFontPlatform"
												size="18">{{$utils.toUniCode('&#xe640;')}}</uni-icons>
										</view>

										<text style="margin-left: 8px;">{{element.ProcedureName}}</text>

										<!-- 是否外协 -->
										<u-tag v-if="element.Outsource" style="margin-left: 10rpx;" text="外协"
											size="mini" type="warning"></u-tag>
										</u-tag>

									</view>

									<view class="RightBox x-f" style="height: 100%;">

										<u-icon name="list" color="#999" size="28"
											style="font-weight: 600;margin-right: 6px;"></u-icon>

										<uni-icons type="compose" color="#999" size="28"
											@click="EditCell(element,index)"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</template>
				</m-basic-drag>

				<!-- </view> -->

				<!-- 添加工序 -->
				<view class="BtnBox" style="margin: 20px 0;">
					<button @click="GetProcedure" class="SaveBtn">
						<uni-icons type="plusempty" color="#51d0d0" size="20"></uni-icons>
						添加工序
					</button>

				</view>
			</view>

			<!-- 空状态 -->
			<view class="isEmptyBox" v-else>
				<u-empty mode="data" icon="/static/image/Img/DataEmpty.png" text="暂无数据" textColor="#999"
					style="margin: 0 auto;">
					<view class="EmptyTextBox" style="min-width: 40vw;">
						<!-- <view class="EmptyText">
							<text>可选择【添加工序】或【添加工艺路线】</text>
						</view> -->
						<button @click="GetProcedure" class="EmptyAddBtn" type="primary">
							<view class="BtnText">
								<uni-icons type="plusempty" color="#fff" size="20"></uni-icons>
								添加工序
							</view>
						</button>
					</view>
				</u-empty>
			</view>

		</view>


		<view class="BottomBox" v-if="PageList.length" :style="$utils.disposeSafeBottomFun()">

			<button class="SaveBtn" @click="updataRouting">更新工艺路线</button>
			<button class="SubBtn" @click="SubmitBtn">确定</button>
		</view>


		<uni-popup class="MainPopup" ref="updataPopup" background-color="#fff" :is-mask-click="false">
			<view class="f-dc" style="width: 80vw;background-color: #fff;">
				<u-navbar :fixed="false" title="更新工艺路线" :autoBack="false" :safeAreaInsetTop="false" leftIcon=" "
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeUpdataRoutingPopup"></uni-icons>
					</view>
				</u-navbar>


				<view class="MainBox">

					<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
						<u-form-item labelWidth="100" label="版本" prop="Versions" leftIcon="order" borderBottom
							:required="$utils.isEmpty(Versions)" :leftIconStyle="{'font-size':'20px'}">

							<u--input v-model="formData.Versions" placeholder="请输入版本号"
								:readonly="$utils.isEmpty(Versions) ? false : true" border="none"></u--input>

							<view slot="right">

								<uni-icons type="help-filled" size="30" @click="openHistoryVersion"
									color="#f8893f"></uni-icons>

							</view>
						</u-form-item>

					</u--form>

				</view>

				<view class="BottomBox">
					<view class="x-ec" style="width: 100%;">
						<button class="content_bottom_primary_plainBtn CommonBtnSize"
							style="margin-left: 10px !important;" @click="closeUpdataRoutingPopup">取消</button>
						<button class="content_bottom_primary_Btn CommonBtnSize" @click="submitUpdataRouting"
							style="margin-left: 10px !important;">确定</button>
					</view>
				</view>
			</view>



			<uni-popup class="MainPopup" ref="updataPopup_hisVersion" background-color="#fff" :is-mask-click="true">
				<view class="f-dc" style="width: 70vw;background-color: #fff;height: 500rpx;">
					<u-navbar :fixed="false" title="历史版本记录" :autoBack="false" :safeAreaInsetTop="false" leftIcon=" "
						leftIconColor="#fff" style="width: 100%;">
					</u-navbar>

					<view style="flex: 1;overflow: auto;">
						<view class="FiledBox" v-for="row in hisVersionData">
							<text class=" FiledBox_grifola">版本号:</text>
							<text class="FiledBox_value FiledBox_grifola">{{row.Versions}}</text>
						</view>
					</view>
				</view>
			</uni-popup>
		</uni-popup>

	</view>
</template>

<script>
	// 工艺路线
	export default {
		data() {
			return {
				PageList: [],
				FWorkshop: {}, // 主表带入的工作中心数据
				PageItemData: {}, // 选中的详细数据
				PageListIndex: null, // 选中的索引
				EditIndex: null, // 选中的主列表索引
				Versions: null, // 工艺路线版本
				ProcessRouteID: null, // 工艺路线id
				formData: {
					Versions: null, // 工艺路线版本
				},
				rules: {
					'Versions': {
						type: 'string',
						required: true,
						message: '工艺路线版本不能为空',
						trigger: ['change']
					},
				},
				FormData: {}, // 主表数据
				hisVersionData: [], // 工艺路线，历史版本数据
			}
		},
		onLoad(option) {},
		created() {
			let Data = [];
			Data = JSON.parse(JSON.stringify(this.$store.state.TicketModule.CreateTicket_Routing));
			let deepcloneForm = this.$utils.deepClone(Data.FormData)
			Object.assign(this.FormData, deepcloneForm)

			if (Data.RoutingData.length) {
				this.PageList = JSON.parse(JSON.stringify(Data.RoutingData))
				// 记录当前物料版本信息
				this.formData.Versions = Data.RoutingData[0]['Versions']
				this.Versions = Data.RoutingData[0]['Versions']

				this.ProcessRouteID = Data.RoutingData[0]['ProcessRouteID']

				this.PageList.map((item, index) => {
					item['index'] = index
				})
			}

			if (Data.FWorkshop) {

				this.FWorkshop = Object.assign(this.FWorkshop, Data.FWorkshop);
			}

		},
		mounted() {
			let that = this;
			uni.$on('EditInfo_Change', function(ret) {
				if (ret.type == '工序') {

					that.PageList.splice(that.EditIndex, 1);
					that.PageList.splice(that.EditIndex, 0, ret.data);

					that.PageList.map((item, index) => {
						// if (index == that.EditIndex) {
						// 	console.log(that.EditIndex)
						// 	item = Object.assign(item, ret.data);
						// }
						item['index'] = index
					})
					console.log(that.PageList)


					// that.PageList[that.EditIndex] = ret.data;

					// that.PageList.map((item, index) => {
					// 	item['index'] = index
					// })
				}
			})

			uni.$on('Ticket_Routing_Choice', function(ret) {
				if (ret.type == '添加工序') {
					let ChoiceData = JSON.parse(JSON.stringify(ret.data));

					let Data = [];

					ChoiceData.map(item => {
						item.Type = 0;
					});

					that.PageList.push(...ChoiceData)

					that.PageList.map((item, index) => {
						item['index'] = index;
					});

				}
			})

		},
		methods: {
			GetProcedure() { // 前往工序
				let obj = {
					allowClear: true,
					cmd: 'XGD_Procedure',
					type: '添加工序',
					ListeningName: 'Ticket_Routing_Choice',
					// multiple: false,
					serverSearch: {
						isPaging: true, //是否分页
						searchKey: 'SearchKey', //搜索关键词，应包含在param中
						showText: 'ProcedureName', //查询结果显示的字段
						pageIndexStr: 'PageIndex', //分页页码字段，应包含在param中
						ChoiceDataKey: 'ProcedureID',
						ChoiceDataData: [],
					},
					param: {
						SearchKey: '',
						PageIndex: 1,
						PageSize: 30,
					}
				}

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: obj
				})

				uni.navigateTo({
					url: '/commonPage/Tool/SelectBaseScreen'
				})
			},
			DeleteListData(data, index) { // 主列表 删除按钮
				// console.log(JSON.stringify(data))
				// console.log(JSON.stringify(index))

				this.PageList.splice(index, 1)
			},
			DeleteChildData(data, index) { // 删除 主列表 - 工艺路线详情弹层 - 子列表数据
				this.PageItemData['Array'].splice(index, 1);

				this.PageItemData['Array'].map((item, index) => {
					item['index'] = index;
				})
				// this.PageList[this.PageListIndex]['Array'].splice(index, 1);
			},
			EditCell(data, index) { // 编辑修改工序信息
				// console.log(JSON.stringify(data))
				// console.log(JSON.stringify(this.PageList[index]))

				this.EditIndex = index;

				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'BaseScreenParm',
					data: {
						data: data,
						FWorkshop: this.FWorkshop
					}
				})

				uni.navigateTo({
					url: './ChoiceRoutingInfo'
				})
			},
			SubmitBtn() { // 最终确定按钮
				this.PageList.map((item, index) => {
					item.index = index
				});

				let Obj = {
					Name1: 'CreateTicket_Routing',
					data: this.PageList
				};

				this.$store.commit('TicketModule/ChangeAndSetStateData', Obj);

				uni.$emit('CreateTicet_Choice', {
					type: '工艺路线'
				})
				uni.navigateBack()

			},
			updataRouting() { // 更新工艺路线
				let that = this;

				that.$refs.updataPopup.open()
			},
			openHistoryVersion() { // 点击查看历史版本信息
				let that = this;
				// this.$utils.msg('查看历史')
				that.$refs.updataPopup_hisVersion.open();

				that.Request.request('XGD_SelectProcedureVerison', {
					ProductID: that.FormData.ProductID
				}, function(ret) {
					console.log(ret)
					if (ret.status == 200) {
						that.hisVersionData = ret.data.ds;

					}
				})

			},
			closeUpdataRoutingPopup() {
				this.hisVersionData = [];
				this.$refs.updataPopup.close()
			},
			submitUpdataRouting() {
				let that = this;


				this.$refs.uForm.validate().then(res => {

					that.$utils.showLoading();

					let ProcedureID = [],
						WoFWorkshopID = [],
						EquipmentTypeID = [],
						LabourCost = [],
						Outsource = [],
						MoludTypeID = [],
						HourGJ = [],
						ManHour = [];
					that.PageList.forEach(item => {
						ProcedureID.push(item.ProcedureID || 0)
						WoFWorkshopID.push(item.FWorkshopID || 0)
						EquipmentTypeID.push(item.EquipmentTypeID || 0)
						LabourCost.push(item.LabourCost || 0)
						Outsource.push(item.Outsource || 0)
						MoludTypeID.push(item.MoludTypeID || 0)
						HourGJ.push(item.HourGJ || 0)
						ManHour.push(item.ManHour || 0)
					})

					let obj = {
						FType: that.$utils.isEmpty(that.Versions) ? '新建' : '覆盖',
						IsLinear: that.FormData.IsLinearID,
						ProcessRouteID: that.ProcessRouteID || 0,
						ProductID: that.FormData.ProductID,
						Versions: that.formData.Versions,
						ProcedureID: ProcedureID.join('~'),
						WoFWorkshopID: WoFWorkshopID.join('~'),
						EquipmentTypeID: EquipmentTypeID.join('~'),
						LabourCost: LabourCost.join('~'),
						Outsource: Outsource.join('~'),
						MoludTypeID: MoludTypeID.join('~'),
						HourGJ: HourGJ.join('~'),
						ManHour: ManHour.join('~'),
					}

					try {
						that.Request.request('XGD_ProcCreateUpdate', obj, (ret) => {
							that.$utils.hideLoading();

							uni.showToast({
								title: ret.data.ds[0]['RMS'],
							})

							that.closeUpdataRoutingPopup();
						}, (err) => {
							that.$utils.hideLoading();
						})
					} catch (e) {
						that.$utils.hideLoading();
						//TODO handle the exception
					}


				}).catch(errors => {
					console.log(JSON.stringify(errors))
					if (Array.isArray(errors)) {

						that.$utils.hideLoading();
						uni.$u.toast('请填写版本号')
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		// height: calc(100vh - 60px);
		background-color: #f9f9f9;

		.FiledBox {
			position: relative;
			font-size: 16px;
			padding: 10px 15px !important;

			&::after {
				position: absolute;
				box-sizing: border-box;
				content: ' ';
				pointer-events: none;
				right: 16px;
				bottom: 0;
				left: 16px;
				border-bottom: 1px solid #ebedf0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}

			&:last-child::after {
				border-bottom: none;
			}
		}

		.MainBox {
			flex: 1;
			overflow: auto;

			.u-cell {
				// height: 100%;

				.u-cell__body {
					height: 100% !important;
				}
			}

			.HasDataBox {
				// display: flex;
				// flex-direction: column;

				.ListBox {
					.MaxBox {
						height: 100%;

						.TheIndex {
							height: 100%;
							min-width: 60px;
							justify-content: center;

							.IndexBox {
								width: 24px;
								height: 24px;
								background-color: #51d0d0;
								color: #fff;
								border-radius: 24px;
								line-height: 24px;
								text-align: center;
							}
						}
					}
				}

				.BtnBox {
					display: flex;
					align-items: center;
					justify-content: center;

					.SaveBtn {
						width: 80%;
						color: #51d0d0;
						background-color: #fff;
						border: 1px solid #51d0d0;
						border-radius: 12px;
					}
				}
			}


			.isEmptyBox {
				height: 100%;
				padding-top: 10vh;
				// display: flex;
				// align-items: center;
				// justify-content: center;

				.EmptyTextBox {

					.EmptyText {
						text-align: center;
						margin-top: 20px;
						color: #999;
						font-size: 14px;
					}

					.EmptyAddBtn {
						width: 100%;
						color: #fff;
						background-color: #51d0d0;
						border-radius: 12px;
						margin-top: 20px;

						.BtnText {
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

		.BottomBox {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			padding: 10px 15px;
			background-color: #fff;
			border-top: 1px solid #efefef;

			uni-button {
				margin-left: initial !important;
				margin-right: initial !important;
			}

			.SaveBtn {
				width: 44% !important;
				background-color: #fff;
				color: #51d0d0;
				border: 1px solid #51d0d0;
				border-radius: 12px;
			}

			.SubBtn {
				width: 44%;
				// width: 90%;
				background-color: #51d0d0;
				color: #fff;
				border-radius: 12px;
			}
		}


		.PathPopupBox {

			.MainBox {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				padding: 20px 10px;
				overflow: hidden;
				border-radius: 12px 12px 0 0;

				.ModuleBox {
					height: 70px;
					background-color: #eeeeee;
					width: 45%;
					border-radius: 8px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.Icon {
						font-weight: 600;
					}

					.Text {
						margin-top: 6px;
						font-size: 13px;
						font-weight: 600;
					}
				}
			}
		}

		// 工艺路线详情弹层
		.GLYXInfo {
			.u-transition {
				z-index: 9999 !important;
			}

			.MainBox {
				display: flex;
				flex-direction: column;
				padding-bottom: 20px;

				.ListBox {
					// flex: 1;
				}
			}
		}

		// 工序弹层
		.Gongxu {
			.u-transition {
				z-index: 999999 !important;
			}
		}

		// 复选框样式 start
		.uni-checkbox-input {
			border: 2px solid #d1d1d1 !important;
		}

		.uni-checkbox-input-checked {
			background: #51d0d0;
			color: #fff !important;
			border-color: #51d0d0 !important;
		}

		// 复选框样式 End


		.ProcessPopupBox {
			height: 90vh;
			display: flex;
			flex-direction: column;

			.SearchBox {
				// background-color: #fff;
				background-color: #51d0d0;
				padding: 6px 10px;
			}

			.MainBox {
				flex: 1;
				// overflow: auto;
				// height: 100%;
				background-color: #eeeeee;
				// display: flex;
				// flex-direction: column;

				.TheList {
					// flex: 1;
					height: 100% !important;
					background-color: #fff;

					.listBox {
						// height: 100%;
						padding-bottom: 20px;

						.ListItemBox {
							// height: 100%;

							.u-cell {

								.u-cell__body {
									padding: 0 !important;
								}

								.CellRight {
									padding-right: 10px;
								}
							}

							.ListCellLeft {

								.CheckBox {
									padding: 14px 15px;
									width: 100%;

									.TitleBox {
										margin-left: 6px;
										font-size: 16px;
									}

									.CellLabel {
										color: #818181;
										font-size: 14px;
										margin-top: 6px;
										width: calc(100vw - 80px - 100px);
										white-space: nowrap;
										overflow: hidden;
										text-overflow: ellipsis;
									}
								}
							}

							.Popup_Look {
								background-color: #51d0d0;
								color: #fff;
								border-radius: 8px;
								min-width: 30px;
								height: 30px;
								line-height: 30px;
								font-size: 12px;
								margin-right: 10px;
							}
						}
					}
				}
			}

			.PopupBottomBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;
				border-top: 1px solid #efefef;

				.ChoiceNumBox {
					width: fit-content;

					.Nums {
						margin: 0 4px 0 2px;
						color: #51d0d0;
						font-size: 18px;
						font-weight: 600;
					}
				}

				.BtnBox {
					// flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.SubBtn {
						// width: 40%;
						min-width: 200px;
						background-color: #51d0d0;
						color: #fff;
						border-radius: 12px;
					}
				}
			}
		}
	}

	.MainPopup {

		.u-transition {
			z-index: 9999999 !important;
		}

		.MainBox {
			padding: 0px 20rpx;
			flex: 1;
			overflow: auto;
			min-height: 200rpx;
		}

		.PopupBottomBox {
			justify-content: space-evenly;
			padding: 8rpx 8rpx;
			border-top: 1px solid #ececec;

			button {
				width: 44%;

				&:first-child {
					background-color: #fff;
					color: #51d0d0;
					border: 1px solid #51d0d0;
				}

				&:last-child {
					background-color: #51d0d0;
					color: #fff;
				}
			}
		}

	}
</style>